<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
        // 将扁平数据转换为树形结构数据
      function getTreeData(data) {
        const treeData = [];
        // 遍历循环data，判断pid是否为空
        data.forEach(item => {
            // 如果pid为空
            if(!item.pid){
                treeData.push(item) 
            }
            // 如果不为空,则进行对原数组进行筛选，选出id等于此项pid的元素，组成新的数组
           const children = data.filter(value =>value.pid === item.id)
        //    如果筛选的数组为空，则return
            if(!children.length) return
            // 否则将此新数组赋值给item的children属性
            item.children = children

        });
        return treeData;
      }

      const data = [
        { id: "01", name: "张大大", pid: "", job: "项目经理" },

        { id: "02", name: "小亮", pid: "01", job: "产品leader" },
        { id: "07", name: "小丽", pid: "02", job: "产品经理" },
        { id: "08", name: "大光", pid: "02", job: "产品经理" },

        { id: "03", name: "小美", pid: "01", job: "UIleader" },
        { id: "09", name: "小高", pid: "03", job: "UI设计师" },
        { id: "05", name: "老王", pid: "01", job: "测试leader" },
        { id: "06", name: "老李", pid: "01", job: "运维leader" },

        { id: "04", name: "老马", pid: "01", job: "技术leader" },
        { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
        { id: "11", name: "小华", pid: "04", job: "后端工程师" },
        { id: "12", name: "小李", pid: "04", job: "后端工程师" },

        { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
        { id: "14", name: "小强", pid: "05", job: "测试工程师" },
        { id: "15", name: "小涛", pid: "06", job: "运维工程师" },
      ];
      const treeData = getTreeData(data);

      console.log(treeData);
    </script>
  </body>
</html>
